<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>resume</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <div class="z-main" >
    <div class="z-nav-left">
      <div id="nav1" class="z-nav-left-box-selected" @click="changeId(1)">
        <div class="z-nav-left-box-icon">
          <el-image id="" src="icon/bag_2.png"></el-image>
        </div>
        <div class="z-nav-left-box-text">
          <div>HOME</div>
        </div>
      </div>
      <div id="nav2" class="z-nav-left-box" @click="changeId(2)">
        <div class="z-nav-left-box-icon">
          <el-image src="icon/camera_2.png"></el-image>
        </div>
        <div class="z-nav-left-box-text">
          <div>ABOUT</div>
        </div>
      </div>
      <div id="nav3" class="z-nav-left-box" @click="changeId(3)">
        <div class="z-nav-left-box-icon">
          <el-image src="icon/juice_2.png"></el-image>
        </div>
        <div class="z-nav-left-box-text">
          <div>EDUCATION</div>
        </div>
      </div>
      <div id="nav4" class="z-nav-left-box" @click="changeId(4)">
        <div class="z-nav-left-box-icon">
          <el-image src="icon/sun_2.png"></el-image>
        </div>
        <div class="z-nav-left-box-text">
          <div>HONOR</div>
        </div>
      </div>
      <di id="nav5" class="z-nav-left-box" @click="changeId(5)">
        <div class="z-nav-left-box-icon">
          <el-image src="icon/ice_cream_2.png"></el-image>
        </div>
        <div class="z-nav-left-box-text">
          <div>MOTTO</div>
        </div>
      </di>
    </div>


    <div class="z-content">
      <div v-if="contentId === 1">
        <div class="z-content-home z-content">
          <div class="z-content-home-name">
            NEW LIFE
          </div>
          <div class="z-content-home-date">
            2021/12/12 © 1805537836@qq.com<br>
            Instructor 2485160885@qq.com
          </div>
        </div>
      </div>
      <div v-if="contentId === 2">
        <div class="z-content-abo z-content">
          <el-scrollbar style="height:100%">
              <div class="z-content-abo-g1" >
                <div class="z-content-t1">
                    ABOUT ME
                </div>
                <div class="z-content-t2">
                  <p align="center">Hello, I'm Jennifer Doe and i'm a passionate designer, photographer and blogger.
                  I currently reside in Melbourne, California.I love creating new
                  content, photography, good cookery and listening to music.</p>
                  <p>I am currently working as a web designer at TRIA.</p>
                </div>
              </div>
              <div class="z-content-abo-g2" >
                <div class="z-content-t1">
                  PERSONAL INFO
                </div> 
                <div class="z-content-abo-g2-group">
                  <div class="z-content-abo-g2-group-r">
                    <div class="z-content-abo-g2-group-m">
                      <div class="z-content-t3">NAME</div>
                      <div class="z-content-t4">Zhu Hong Bo</div>
                    </div>
                    <div class="z-content-abo-g2-group-m">
                      <div class="z-content-t3">BIRTHDAY</div>
                      <div class="z-content-t4">May 31,2000 </div>
                    </div>
                    <div class="z-content-abo-g2-group-m">
                      <div class="z-content-t3">ADDRESS</div>
                      <div class="z-content-t4">JinLin,China</div>
                    </div>
                  </div>
                  <div class="z-content-abo-g2-group-r">
                    <div class="z-content-abo-g2-group-m">
                      <div class="z-content-t3">PHONE</div>
                      <div class="z-content-t4">15004413382</div>
                    </div>
                    <div class="z-content-abo-g2-group-m">
                      <div class="z-content-t3">EMAIL</div>
                      <div class="z-content-t4">1805537836@qq.com</div>
                    </div>
                    <div class="z-content-abo-g2-group-m">
                      <div class="z-content-t3">WEBSITE</div>
                      <div class="z-content-t4"><a href="https://example.com">https://example.com</a></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="z-content-abo-g3" >
                <div class="z-content-t1">
                  66
                </div>
                <div class="z-content-t5">
                  <p align="center">
										It is not possible to design always the same. How to be different in each different place - that is the most important work and duty of the architect to find out.
									</p>
                </div>
                <div class="z-content-t6">
                  Jean Nouvel
                </div>
              </div>
              <div class="z-content-abo-g4" >
                
              </div>
              <div class="z-content-abo-g5" >
                
              </div>
            </el-scrollbar>  
        </div>
      </div>
      <div v-if="contentId === 3">
        <div class="z-content-sch z-content">
          <el-srcollbar style="height: 100%;">

          </el-srcollbar>
        </div>
      </div>
      <div v-if="contentId === 4">
        <div class="z-content-honor z-content">4</div>
      </div>
      <div v-if="contentId === 5">
        <div class="z-content-motto z-content">5</div>
      </div>
    </div>
  </div>
</div>
</body>

<!-- import Vue before Element -->
<script  src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script  src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        contentId: 1
      }
    },
    methods: {
      changeId(idx) {
        this.contentId = idx;

        let d = [];
        for(let i = 1;i < 5;i++) {
          d[i] = document.getElementById("nav" + i);
          if(i != idx) {
            d[i].setAttribute("class","z-nav-left-box");
          } else {
            d[i].setAttribute("class","z-nav-left-box-selected");
          }
        }
      }
    }
  })
</script>
</html>
